Quick Overview of Project
Introduction to Project
In August 2020, I joined the 2nd ETHGlobal hackathon of the year called HackFS, a hackathon focussed on using new tech in blockchain, DeFi, and mainly, IPFS (sponsored by Filecoin). I joined the hackathon solo and found a group called “Padlock” to work on, run by James Waugh for Secret Network. It was the first time I had joined a new team but it would end up being a very fruitful project where I learned the most I had during 2020.
Roles
Michal: Project Manager & UI/UX Designer
James: Product Owner
Ahmed: Full Stack developer
Taariq: Contract Engineer (Ethereuem and Secret Network)
Can: Creative Director
James: Product Owner
Ahmed: Full Stack developer
Taariq: Contract Engineer (Ethereuem and Secret Network)
Can: Creative Director
Secret Network is a blockchain-based, open-source protocol based on what is known as secret contracts, much like smart contracts on Ethereum.
Design Problem
Padlock was an idea about encrypting and uploading content onto IPFS and monetizing access through Ethereum payments with the programmable privacy of Secret Network.
Therefore the main challenge for the hack was to bring together secret and smart contracts (from two different blockchains) in order to monetize encrypted content uploaded onto IPFS. The privacy-preserving features of secret contracts on Secret Network would be a key benefit for users hosting their content on the decentralized web.
Secret Network is designed to create a scalable and interoperable smart contract system that enables programmable privacy – allowing developers to build applications that run computations with encrypted inputs, outputs, and state, without revealing the data.
Design Challenge
What we set out to accomplish during HackFS was to build a reusable “lock” mechanism that can be integrated into any existing Web 3 or Web 2 content platforms for creators to encrypt anything and sell private keys that unlocks their content. We derived this challenge from a few key insights we found from our design workshop I ran to get the ideas rolling.
Ideation
During our brainstorming sessions there were a few keywords that kept popping up as we were going through some ideations methods of “how might we” exercises.
These were;
Access control
Programmable Privacy
Key Management
Content Encryption
IPFS indexing
Programmable Privacy
Key Management
Content Encryption
IPFS indexing
From here, I knew after this session there would be a few more steps in research to take before moving on with the design of the project.
Some ideation work from the design sprint conducted to outline the main features our team would focus on building.
Research
My research plan for the project was to interview all stakeholders in the team, as well as key stakeholders on the Secret team, and use all insights to handle project management tasks as well as keep everyone on track.
I also conducted product research with some competitor analysis to get an idea of the potential industries padlock could be placed in.
Lastly, I also engaged with an extreme user through an interview and looked into what key benefits would be needed in the designed interface that would best serve users like music artists and writers. (Along with this I wrote out a user question survey to confirm some of the ideas brought up int he interviews - however that did not get widely distributed for this project, due to our tight timelines)
User Persona Exploration
The aspect of privacy is a value point for both creators and end-users seeking to host and buy their content, including controlling the access to that content. Whether it is online or on IPFS does not seem to affect that shared value as long as complexity is abstracted away.
Replicating Web 2.0 versions of the content platforms that users find familiar and have come to value is an insight that is shared between all stakeholders of this project as well as users who have been a part of the research so far.
Insight and Opportunity
The best insight that lead into out opportunity/motivation for the design in the project I got from my research was the answer to this question:
Why would people use Padlock?
Padlock will offer a means for hosting/uploading/monetizing content through encryption and decryption keys management, not only managing how content is hosted but who has access to that content. A means to “padlock” content is what will be the main value proposition for this special Web 3.0 tool.
"We’re intentionally developing a product to be used by existing media platforms in web2, web3, and beyond. Padlock is a funding mechanism making use of current DeFi and IPFS technology together in the same tool."
Solution
Our solution was to create secret contacts that could accept payments from the Ethereum network in order to allow content creators to sell access to uploaded content to their customers along with a widget-like modular tool interface to facilitate this transaction.
What we set out to accomplish for users is to build a reusable “lock” mechanism that can be integrated into any existing content platforms (for this hack, hosted on IPFS) in order for creators to encrypt anything and sell private keys that unlock that content.
So, what is Padlock?
Padlock is a tool to help artists monetize their creative work on the decentralized web. Users can buy or sell access to exclusive content hosted on IPFS and Filecoin. This could be any kind of art, including music, images, a virtual experience, or written content. (read more here)
How does Padlock work?
Padlock works a tool for “padlocking” any content and monetizing it with any means of payment. Therefore this app is modular and adaptable as a blockchain agnostic tool in two main ways;
1: How content can be uploaded/stored
2: How content can be paid for using Ethereum based payments.
Because padlock will enable artists to monetize their creative work via the decentralized web, the app will generate unique decryption keys and store them in the encrypted state of a secret contract on Secret Network that end users can buy or sell access to exclusive content created by the artists.
Integrating NFT’s as is possible on the Ethereum shows a lot of promise while we are working on the underlying tech. This includes using Textile’s Powergate API for deploying multi-tiered storage across Filecoin and IPFS. Filecoin offers persistent storage with rich configuration for data. Network available storage is also configurable and provided through a connected IPFS peer or pinning network.
Wireframing & Low-Fi
Version 1.0
The first version of Padlock was about mapping out the entire process with divergent thinking. This proved to be too involved and an. abundance of screens to show the user which increased complexity. When lookin at it again in a dedicated technical walkthrough we as a team found out most of it could be abstracted away (one of the hallmarks of Web 3 UI/UX in order to make it look and feel the same to new comers as Web 2 applications often do).
See below at how exhausted the process became, this is why it is good to design first before jumping straight into development.
Wire-framing and mapping (in Figma)
Version 1.1
The next iteration focussed on the less importnat side of the UX jpurney, which was on the content uploaders UX for seeing their specific info after selling content. This also proved to be too much to build as we wanted this to be a tool that could be integrated into an existing platform. Also this payment information could be better seen using popular Web 3 tech like metamask, and other content platforms like Audius and Foundation, which all take care of wallet information better than our tool could.
Low-Fidelity (Previews made in Figma)
Version 2.0
The final iteration concluded with the right attention paid to right aspects of the journey, which was a focus on browsing and reviewing the content directly. This was the version that was taken into development that could serve as the best POC version of our tool.
Low-Fidelity (Previews made in Figma)
Coded Digital Interactive Prototype
Hi-Fidelity (Previews made in Webflow)
Hi-Fidelity (Previews made in Webflow)
Responsive Design (Mobile)
Hi-Fidelity (Previews made in Webflow)
Colour Works
Hi-Fidelity (Previews made in Figma)
Presentation and Judging
Slides for video submission for Hackathon Judging
Video Submission for Hackathon
Conclusion
At the end of the hackathon, we delivered a working POC dApp tool hosted with an unstoppable domain, uploading to IPFS using indexing technology like the Graph and using the Ethereum network as a way to pay for access to the private keys for the content piece. In addition to this, we also introduced a potential use case for implementing this tool as an integration onto an already existing platform, Audius.
How it's made
The dApp uses Secret Network for key generation for content encryption/decryption, IPFS and Filecoin for storage (leveraged by Textile’s Powergate using the public http instance for IPFS hosting and Filecoin deal-making), The Graph for indexing, Fleek for hosting, 3Box for managing profiles and storing secret keys and Secret Network credentials, Metamask for Ethereum wallet use, and Pinata for pinning IPFS creations.
The dApp is built using Typescript-based React w/ Redux Saga for state management. Ethereum is used as the payment and data layer. There’s also the oracle that’s watching purchases and whitelisting buyers on the Padlock Secret Network contract as well as minting an NFT for each user purchase which acts as a receipt.
Prizes
Even thought we did not make the finalist panel - we did when a number of prizes for this hack, namely:
Tied for 1st place The Graph bounty for best sub-graph
2nd Prize winners for 3Box and Unstoppable track during hackathon for best creative use of the tech
2nd Prize winners for 3Box and Unstoppable track during hackathon for best creative use of the tech
More info: https://thegraph.com/blog/hackfs-winners
